<template>
  <div id="loginApp">
    <div class="overCurtain"></div>

    <div class="hide-center">
      <div id="formhead">
        <div id="formhead-title">
          用户登录
        </div>
      </div>
      <div id="formbody">
        <div class="loginPhoneNumber">
          <input id="input-topright-loginInput" name="userName" class="loginInput" placeholder="手机号" type="text"
                 v-model="phoneNumber">
        </div>
        <div class="loginPassword">
          <input id="input-bottomright-loginInput" name="password" class="loginInput" placeholder="密码" type="password"
                 v-model="password" style="border-bottom-right-radius:5px;">
        </div>
        <div id="formfoot" v-on:click="login">
          <button id="BSignIn" type="submit">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "jquery"
import Vue from "vue";
import axios from 'axios'
import "../assets/css/login.css"

Vue.config.$axios = axios

export default {
  data() {
    return {
      phoneNumber: "",
      password: "",
    }
  },
  methods: {
    login: function (event) {
      let postBody = {
        "phoneNumber": this.phoneNumber,
        "password": this.password
      }
      axios.post('user/login', postBody).then(res=>{
        if (res.data.code === 0) {
          sessionStorage.setItem("userInfo", JSON.stringify(res.data.data[0]))
          alert("登录成功")
          this.$router.push("/main")
        } else alert(res.data.errorMessage)
      }).catch(res=>{
        alert("服务错误，请稍后重试")
      })
    }
  },
  mounted() {
    window.vue = this
  }
}
</script>

<style>
</style>
